<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ app_name }}{% endblock %}</title>
    <script src="/static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="/static/vendor/css/font-awesome-6.4.0.all.min.css">
    <script src="/static/js/auth-manager.js"></script>
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        
        * {
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .gradient-bg {
            background: var(--primary-gradient);
        }
        
        .gradient-text {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .login-card {
            transition: all 0.3s ease;
        }
        
        .login-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .input-group {
            position: relative;
        }
        
        .input-group input:focus + label,
        .input-group input:not(:placeholder-shown) + label {
            transform: translateY(-25px) scale(0.8);
            color: #667eea;
        }
        
        .input-group label {
            position: absolute;
            left: 12px;
            top: 12px;
            color: #64748b;
            pointer-events: none;
            transition: all 0.3s ease;
            background: white;
            padding: 0 4px;
        }
        
        .shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
        }
        
        .shape-1 {
            width: 300px;
            height: 300px;
            background: var(--primary-gradient);
            top: -150px;
            right: -150px;
        }
        
        .shape-2 {
            width: 200px;
            height: 200px;
            background: var(--secondary-gradient);
            bottom: -100px;
            left: -100px;
        }
        
        .shape-3 {
            width: 150px;
            height: 150px;
            background: var(--success-gradient);
            top: 50%;
            right: -75px;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body class="min-h-screen flex items-center justify-center gradient-bg relative overflow-hidden">
    <!-- 背景装饰形状 -->
    <div class="shape shape-1 animate-float"></div>
    <div class="shape shape-2 animate-float" style="animation-delay: 2s;"></div>
    <div class="shape shape-3 animate-float" style="animation-delay: 4s;"></div>
    
    {% block content %}{% endblock %}
    
    <script>
        // AJAX请求封装
        async function apiRequest(url, options = {}) {
            const defaultOptions = {
                headers: {
                    'Content-Type': 'application/json',
                }
            };

            // 如果有token，添加到请求头
            let token = localStorage.getItem('auth_token');
            if (!token) {
                // 从cookie获取token
                const cookieToken = document.cookie
                    .split('; ')
                    .find(row => row.startsWith('auth_token='));
                if (cookieToken) {
                    token = cookieToken.split('=')[1];
                }
            }
            if (!token) {
                token = new URLSearchParams(window.location.search).get('token');
            }
            if (token) {
                defaultOptions.headers['Authorization'] = `Bearer ${token}`;
            }

            const finalOptions = {
                ...defaultOptions,
                ...options,
                headers: {
                    ...defaultOptions.headers,
                    ...options.headers
                }
            };

            try {
                const response = await fetch(url, finalOptions);
                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.detail || data.message || '请求失败');
                }

                return data;
            } catch (error) {
                console.error('API请求失败:', error);
                throw new Error(error.message || '请求失败');
            }
        }
        
        // 显示通知
        function showNotification(message, type = 'success') {
            // 移除已存在的通知
            const existingNotifications = document.querySelectorAll('.notification');
            existingNotifications.forEach(n => n.remove());

            const notification = document.createElement('div');
            notification.className = `notification fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
                type === 'success' ? 'bg-green-500' : 'bg-red-500'
            } text-white`;
            notification.textContent = message;

            document.body.appendChild(notification);

            // 3秒后移除
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.remove();
                }
            }, 3000);
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleString('zh-CN');
        }
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>